<script setup>
import { ref } from "vue";
import { imgUrl } from "../../../utils/global";

const typeList = ref([
  "全部",
  "待付款",
  "待服务",
  "待评价",
  "已取消",
  "已完成",
]);
const currentType = ref(0);
</script>

<template>
  <view class="app-order">
    <view class="order-header">
      <view class="input-wrapper">
        <view class="input-container">
          <uni-icons type="search" size="24" color="#808080"></uni-icons>
          <input type="text" placeholder="搜索商品" />
        </view>
        <text>搜索</text>
      </view>

      <view class="type-wrapper">
        <text
          :class="currentType === index ? 'type-item-active' : ''"
          v-for="(item, index) in typeList"
          :key="`type-item-${index}`"
          @click="currentType = index"
          >{{ item }}</text
        >
      </view>
    </view>

    <view class="order-list">
      <view class="order-item" v-for="index in 30" :key="`order-item-${index}`">
        <text class="order-title">上海金山区亭林医院体检中心</text>
        <view class="order-status">
          <text>2025-04-08 12:04:32</text>
          <text>待支付</text>
        </view>
        <view class="order-detail">
          <image
            :src="imgUrl('/static/img/imgs/order-img.png')"
            mode="aspectFill"
          ></image>
          <view class="order-content">
            <view>
              <text>父母高级双人套餐</text>
              <text>x1</text>
            </view>
            <text>覆盖中老年人必查项目</text>
          </view>
        </view>
        <view class="order-price">
          <view>
            <text>总价：</text>
            <text>￥79</text>
          </view>
          <view>
            <text>实付款</text>
            <text>￥79</text>
          </view>
        </view>
        <view class="order-footer">
          <text>更多</text>

          <view class="order-button">
            <text>待支付</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style src="./style.scss" scoped />
